<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {createWebhook, deleteWebhook, listWebhook} from "../../../http/rabbitmq/webhook.js";
import {rabbitmqStore} from "../../../stores/counter.js";
import {listVhost} from "../../../http/rabbitmq/vhost.js";
import {listQueueByVhost} from "../../../http/rabbitmq/queue.js";

const vhostList = ref([])
const vhostQueueList = ref([])

let webhookTableData = ref([])

let webhookForm = ref({
  "vhost": "/",
  "type": "direct",
  "durable": "true",
  "auto_delete": "false",
  "internal": "false"
})

let showWebhookForm = ref(false)

function handleWebhookCreate() {
  let data = {
    "component": "webhook",
    "vhost": "/",
    "name": "企业微信",
    "value": {
      "uri": "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=a0623e63-349e-4ecd-8a82-c913b2639a69"
    }
  }
  createWebhook("/", "企业微信", data).then(response => {
    handleWebhookList()
  })
}


function handleWebhookList() {
  listWebhook().then(response => {
    webhookTableData.value = response
  })
}

function handleVhostList() {
  listVhost().then(response => {
    vhostList.value = response
  })
}

function handleVhostQueueList(vhost) {
  listQueueByVhost(vhost).then(response => {
    vhostQueueList.value = response
  })
}

onMounted(() => {
  handleWebhookCreate()
  handleWebhookList()
  handleVhostList()
})

onUnmounted(() => {
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleWebhookList">Search</el-button>
          <el-button type="primary" @click="showWebhookCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="webhookTableData" border style="width: 100%;">
      <el-table-column prop="vhost" label="vhost" min-width="80" width="80"/>
      <el-table-column prop="name" label="name" min-width="100">
        <template #default="scope">
          <router-link :to="{path:'/webhook-details', query: { name: scope.row.name, vhost: scope.row.vhost }}">
            {{ scope.row.name }}
          </router-link>
        </template>
      </el-table-column>

      <el-table-column prop="type" label="type" min-width="80" width="80"/>
      <el-table-column prop="pattern" label="pattern" min-width="80" width="80"/>

      <el-table-column label="operations" width="100" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleWebhookDelete(scope.row.vhost, scope.row.name)"
              :title="'是否删除Webhook [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="webhook manage" v-model="showWebhookForm" :close-on-click-modal="false" label-width="160px">
    <el-form ref="form" :model="webhookForm" label-width="160px">
      <el-form-item label="Virtual host">
        <el-select v-model="webhookForm.vhost">
          <el-option
              v-for="item in vhostList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="webhookForm.name"></el-input>
      </el-form-item>

      <el-form-item label="source">
        <el-form-item label="source">
          <el-form ref="form" :model="webhookForm" label-width="160px">
            <el-select v-model="webhookForm.type">
              <el-option label="AMQP 0.9.1" value="amqp091"></el-option>
              <el-option label="AMQP 1.0" value="amqp10"></el-option>
            </el-select>
          </el-form>
        </el-form-item>
      </el-form-item>


      <el-form-item label="类型">
        <el-select v-model="webhookForm.type">
          <el-option
              v-for="item in rabbitmqStore().webhookType"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否持久化">
        <el-select v-model="webhookForm.durable">
          <el-option
              v-for="item in rabbitmqStore().durable"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否自动删除">
        <el-select v-model="webhookForm.auto_delete">
          <el-option
              v-for="item in rabbitmqStore().auto_delete"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否为内部类型">
        <el-select v-model="webhookForm.internal">
          <el-option
              v-for="item in rabbitmqStore().internal"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleWebhookSave">Save</el-button>
        <el-button @click="showWebhookForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>


  </el-dialog>

  <el-dialog title="webhook manage" v-model="showWebhookQueueBindingForm" :close-on-click-modal="false"
             label-width="160px">
    <el-form ref="form" :model="webhookQueueBindingForm" label-width="160px">
      <el-form-item label="队列">
        <el-select v-model="webhookQueueBindingForm.destination">
          <el-option
              v-for="item in vhostQueueList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="routing_key">
        <el-input v-model="webhookForm.routing_key"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleBindingWebhookQueue">Save</el-button>
        <el-button @click="showWebhookQueueBindingForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>